<template>
  <div class="sopmake-preview-page" 
    style="display: flex;
    flex-direction: column;
    width: 1128px;
    min-height: 756px;
    border-right: 1px solid #888;
    border-left: 1px solid #888;
    border-bottom: 1px solid #888;
    page-break-before: auto;
    page-break-after: always;
    overflow: hidden;"
  >
    <div class="sopmake-preview-page__title">
      <pageHead :product-name="productName" :options="options" :index="index" :length="length"></pageHead>
    </div>
    <div class="sopmake-preview-page__content" style="display: flex; flex: 1;">
      <div id="picturesConAll" class="sopmake-preview-page__content-right" style="width:100%;padding:5px;box-sizing: border-box;">
        <img :src="item.filePath || item.pictureUrl" v-for="(item, index) in pictures" style="max-width: 100%;max-height: 100%;">
      </div>
    </div>
  </div>
</template>

<script>
import pageHead from './pageHead'
export default {
  components: {
    pageHead,
  },
  props: {
    options: {
      type: Object,
      default: {}
    },
    productName: {
      type: String,
      default: ''
    },
    pictures: {
      type: Array,
      default: [],
    },
    index: {
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 0
    },
  },
}
</script>